<template>
  <div class="time_warring_handle">
    <div id="timeWarringHandleChar"
         style="width:100%;height:100%"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import ECharts from 'vue-echarts'
export default {
  components: {
    ECharts
  },
  props: {
    xData: {
      type: Array,
      default: Array
    },
    modelData1: {
      type: Array,
      default: Array
    },
    modelData2: {
      type: Array,
      default: Array
    },
    newDate: {
      type: Date,
      default: Date
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    newDate(e) {
      this.chart.resize()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.chart = echarts.init(document.getElementById('timeWarringHandleChar'))
      const data1 = [10, 15, 30, 45, 55, 60]// this.modelData1
      const series1 = this.initSeriesOption('预警', data1, '#fd9d46', '#fff178')
      const data2 = [8, 5, 25, 30, 35, 55]// this.modelData2
      const series2 = this.initSeriesOption('处理', data2, '#65a712', '#e5fc74')
      const xData = ['1月', '2月', '3月', '4月', '5月', '6月']// this.xData//
      const textStyle = {
        color: '#a8aab0',
        fontStyle: 'normal',
        fontFamily: '微软雅黑',
        fontSize: 12
      }
      var option = {
        tooltip: { // 提示框组件
          trigger: 'axis',
          formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
          axisPointer: {
            type: 'shadow',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          textStyle: {
            ...textStyle,
            color: '#fff'
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '0%',
          // top: '40%',
          containLabel: true
        },
        legend: {
          data: ['预警', '处理'],
          textStyle: textStyle
        },
        xAxis: [
          {
            type: 'category',
            //	boundaryGap: true,//坐标轴两边留白
            data: xData,
            axisLabel: { // 坐标轴刻度标签的相关设置。
              //		interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
              //	margin:15,
              textStyle: {
                ...textStyle,
                color: '#fff'
              },
              rotate: 50
            },
            axisTick: {// 坐标轴刻度相关设置。
              show: false
            },
            axisLine: {// 坐标轴轴线相关设置
              lineStyle: {
                color: '#fff',
                opacity: 0.2
              }
            },
            splitLine: { // 坐标轴在 grid 区域中的分隔线。
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 5,
            axisLabel: {
              textStyle: { ...textStyle, color: '#fff' }

            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#fff'],
                opacity: 0.06
              }
            }

          }
        ],
        series: [series1, series2]
      }
      this.chart.setOption(option, true)
    },
    initSeriesOption(name, data, color1, color2) {
      return {
        name: name,
        type: 'bar',
        data: data, //
        barWidth: 10,
        barGap: 0, // 柱间距离
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: color1
            }, {
              offset: 1,
              color: color2
            }]),
            barBorderRadius: 50,
            borderWidth: 0
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.time_warring_handle {
  width: 100%;
  height: 100%;
}
</style>
